<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
        }
        .box{
            width: 400px;
            height: 300px;
            display: flex;
        }
        .box1{
            flex: 2 2 200px;
            background-color: red;
        }
        .box2{
            flex: 1 2 300px;
            background-color: gold;
        }
    </style>
</head>
<body>
    <!-- 
        flex布局中flex-grow和flex-shrink的详细计算公式
        flex-grow:有剩余空间时，分配到的权重值，默认为0
        flex-shrink:收缩系数，只是一个宽度变小的权重分量

        列出box1和box2的计算过程公式
        1.判断所有子元素总宽度和容器宽度的大小
          (1)子元素总宽度和 < 容器宽度
            剩余空间宽度 = 400 - 200 - 50 = 150
            box1分配到的空间 = 150 * 2 / 3 = 100
            box2分配到的空间 = 150 * 1 / 3 = 50 
            box1实际宽度 = box1分配到的空间 + 200 = 300
            box2实际宽度 = box2分配到的空间 + 50 = 100
          (2)子元素总宽度和 > 容器宽度
            溢出空间宽度 = 500 - 400 = 100
            每个元素收缩的权重 = flex-shrink * 宽度
            总权重 = 2*200 + 2*300 = 100
            box1收缩值 = 100 * (2*200 / 1000) = 40
            box2收缩值 = 100 * (2*300 / 1000) = 60
            box1实际宽度 = 200 - 40 = 160
            box1实际宽度 = 300 - 60 = 240
     -->

    <div class="box">
        <div class="box1"></div>
        <div class="box2"></div>
    </div>
</body>
</html>